<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>新增试题</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <!--引入本地的css样式-->
  <link rel="stylesheet" href="../../../static/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../../static/css/admin.css" media="all">

</head>
<body>
<form id="myForm" class="layadmin-user-login-box layadmin-user-login-body layui-form" action="" style="padding: 20px;">
<!-- 试题标题 test_title 试题类型 test_type  -->
  <div class="layui-form-item">
    <label class="layui-form-label">试题标题</label>
    <div class="layui-input-inline">
      <input type="text" name="test_title" lay-verify="required" placeholder="请输入试题标题" autocomplete="off"
             class="layui-input">
    </div>
    <label class="layui-form-label">试题类型：</label>
    <div class="layui-input-inline">
      <div class="layui-input-inline">
        <select name="test_type" id="test_type">
          <option value="">--请选择--</option>
          <option value="JAVA开发">JAVA开发</option>
          <option value="C++开发">C++开发</option>
          <option value="C#开发">C#开发</option>
          <option value="PHP开发">PHP开发</option>
          <option value="软件测试">软件测试</option>
        </select>
      </div>
    </div>
  </div>
<!--  所属部门 dept_name 试题级别 test_level-->
  <div class="layui-form-item">
    <label class="layui-form-label">所属部门</label>
    <div class="layui-input-inline">
      <select name="dept_name" id="dept_name">
        <option value=""></option>
      </select>
    </div>
    <label class="layui-form-label">试题级别：</label>
    <div class="layui-input-inline">
      <div class="layui-input-inline">
        <select name="test_level" id="test_level">
          <option value="">--请选择--</option>
          <option value="A">A</option>
          <option value="B">B</option>
          <option value="C">C</option>
        </select>
      </div>
    </div>
  </div>
  <!--  出题人 test_setter 出题时间 test_set_time-->
  <div class="layui-form-item">
    <label class="layui-form-label">出题人：</label>
    <div class="layui-input-inline">
      <input type="text" name="test_setter" lay-verify="required" placeholder="" autocomplete="off"
             class="layui-input">
    </div>
    <label class="layui-form-label">出题时间：</label>
    <div class="layui-input-inline">
      <div class="layui-input-inline">
        <input type="date" name="test_set_time" lay-verify="required" placeholder="" autocomplete="off"
               class="layui-input">
      </div>
    </div>
  </div>
<!--  试题内容 test_content-->
  <div class="layui-form-item">
    <label class="layui-form-label">试题内容：</label>
    <div class="layui-input-block">
      <textarea name="test_content" lay-verify="required" placeholder="请输入试题内容" class="layui-textarea"></textarea>
    </div>
  </div>
<!--  备注 remark-->
  <div class="layui-form-item">
    <label class="layui-form-label">备注</label>
    <div class="layui-input-block">
      <textarea name="remark" lay-verify="required" placeholder="请输入备注" class="layui-textarea"></textarea>
    </div>
  </div>
<!--  试题附件-->
  <div class="layui-upload">
    <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
    <div class="layui-upload-list" style="max-width: 1000px;">
      <table class="layui-table">
        <colgroup>
          <col>
          <col width="150">
          <col width="260">
          <col width="150">
        </colgroup>
        <thead>
        <tr><th>文件名</th>
          <th>大小</th>
          <th>上传进度</th>
          <th>操作</th>
        </tr></thead>
        <tbody id="demoList"></tbody>
      </table>
    </div>
    <button type="button" class="layui-btn" id="testListAction">开始上传</button>
  </div>
  <!--  是否启用-->
  <div class="layui-form-item">
    <label class="layui-form-label">是否启用</label>
    <div class="layui-input-block">
      <input type="radio" name="status" value="1" title="是">
      <input type="radio" name="status" value="0" title="否" checked>
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-input-block layui-hide">
      <button class="layui-btn" lay-submit lay-filter="submit">保存</button>

      <button type="button" class="layui-btn layui-btn-primary" onclick="cancelForm()">取消</button>
    </div>
  </div>
</form>
<script type="text/javascript" src="../../../static/js/jquery-3.6.0.min.js"></script>
<!--引入本地layui.js-->
<script src="../../../static/layui/layui.js"></script>
<script type="text/javascript">
  // 取消按钮点击事件
  function cancelForm() {
    // 取消表单逻辑
    document.getElementById("myForm").reset(); // 清除表单数据
  }
  layui.use(['form','upload','element','layer'], function () {
    var form = layui.form
            ,element = layui.element
            ,layer = layui.layer
            ,upload=layui.upload
            , $ = layui.jquery;

    $(document).ready(function(){
      console.log("-------------")
      //通过Ajax异步请求-下拉列表选项
      $.ajax({
        url:"/system/selectAllDeptname",
        type:"post",
        data:{},
        dataType:"json",
        success:function (res){
          console.log("res.data------")
          console.log(res.data)
          if(res.code==200){

            let selectElement=document.getElementById("dept_name");
            let  options = res.data;
            for(let i=0;i<res.data.length;i++){
              let optionElement = document.createElement("option");
              optionElement.text=res.data[i].dept_name;
              optionElement.value=res.data[i].dept_name;
              selectElement.add(optionElement);
              console.log(selectElement);
            }
            form.render();

          }else{

          }

        },error:function (res){

        }
      })
    })
    //上传文件
    //演示多文件列表
    var uploadListIns = upload.render({
      elem: '#testList'
      ,elemList: $('#demoList') //列表元素对象
      ,url: '/system/uploadFile' // 实际使用时改成您自己的上传接口即可。
      ,accept: 'file'
      ,multiple: true
      ,number: 3
      ,auto: false
      ,bindAction: '#testListAction'
      ,choose: function(obj){
        var that = this;
        var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
        //读取本地文件
        obj.preview(function(index, file, result){
          var tr = $(['<tr id="upload-'+ index +'">'
            ,'<td>'+ file.name +'</td>'
            ,'<td>'+ (file.size/1024).toFixed(1) +'kb</td>'
            ,'<td><div class="layui-progress" lay-filter="progress-demo-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
            ,'<td>'
            ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
            ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
            ,'</td>'
            ,'</tr>'].join(''));

          //单个重传
          tr.find('.demo-reload').on('click', function(){
            obj.upload(index, file);
          });

          //删除
          tr.find('.demo-delete').on('click', function(){
            delete files[index]; //删除对应的文件
            tr.remove();
            uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
          });

          that.elemList.append(tr);
          element.render('progress'); //渲染新加的进度条组件
        });
      }
      ,done: function(res, index, upload){ //成功的回调
        var that = this;
        //if(res.code == 0){ //上传成功
        var tr = that.elemList.find('tr#upload-'+ index)
                ,tds = tr.children();
        tds.eq(3).html(''); //清空操作
        delete this.files[index]; //删除文件队列已经上传成功的文件
        return;
        //}
        this.error(index, upload);
      }
      ,allDone: function(obj){ //多文件上传完毕后的状态回调
        console.log(obj)
      }
      ,error: function(index, upload){ //错误回调
        var that = this;
        var tr = that.elemList.find('tr#upload-'+ index)
                ,tds = tr.children();
        tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
      }
      ,progress: function(n, elem, e, index){ //注意：index 参数为 layui 2.6.6 新增
        element.progress('progress-demo-'+ index, n + '%'); //执行进度条。n 即为返回的进度百分比
      }
    });



  });
</script>
</body>

</html>